<template>
  <el-collapse-transition>
<div class="bossBox flex-column" v-show="isPass">
  <div class="bodyBox flex-column white">
<!--    <H1 style="text-align: center;color:rgba( 255, 255, 255, 0.55 );text-shadow:#03f6ba 2px 1px;">计划通</H1>-->
    <div class="white inputBox" style="margin-top: 70px">
      <el-input ref="good" @keydown.native.enter="$refs.good2.focus()" clearable class="el-input" type="text" placeholder="登录邮箱" v-model="userEmail" style="text-align: center"/>
    </div>
    <div class="white inputBox">
      <el-input ref="good2" @keydown.native.enter="logIn(toggle)" class="el-input" type="password" placeholder="密码" v-model="userPass"/>
    </div>
    <el-collapse-transition>
      <div v-show="toggle" class="flex-column animate__fadeInDown" style="width: 100%;align-items: center">
        <div class="white inputBox">
          <el-input class="el-input" type="password" placeholder="还是密码" v-model="userPass_2"/>
        </div>
        <div class="white inputBox flex-row" v-show="toggle_2">
          <el-input class="el-input width_50" type="text" placeholder="邮箱验证" v-model="checkNode" show-word-limit maxlength="6" clearable/>
          <el-link class="width_50" style="font-size: 12px;background: transparent">{{leftTime}}秒后可重新发送</el-link>
        </div>
        <div class="width_80" v-show="!toggle_2">
          <el-button class="el-button width_100" @click="toSendMail" style="background: #b00453"  @keydown.native.enter="logIn(toggle)">邮箱验证</el-button>
        </div>
      </div>
    </el-collapse-transition>


    <div class="flex-column" style="margin-bottom: 10px">
      <el-button @click="logIn(toggle)" class="el-button">{{buttonText_1}}</el-button>
      <el-link @click="toToggle(toggle)" type="warning" class="el-link">{{buttonText_2}}</el-link>
    </div>
  </div>
</div>
  </el-collapse-transition>
</template>

<script>
import {HttpManager} from "@/api";

export default {
  name: "ManLog",
  data() {
    return {
      buttonText_1:"登录",
      buttonText_2:"我还没有账号",
      userEmail: '',
      userPass: '',
      userPass_2:'',
      isPass: true,
      checkNode:'',
      user:{
        userId:'',
        userName:'',
        userPassword:'',
        userImgAddress:'',
        userEmail:'',
        userGmtCreate:'',
        userGmtUpdate:'',
        userVersion:'',
        userDeleted:''
      },
      leftTime:60,
      //注册页面显示开关
      toggle:false,
      toggle_2:false
    }
  },
  methods: {
    logIn(index) {
      /*HttpManager.postEmail(this.userEmail)
      HttpManager.getPass().then((response) => {
        if (response !== this.userPass) this.isPass=false
      })*/
      if(!index){
        if(this.userPass !== ''&&this.userPass !== ''){
          let it = new URLSearchParams();
          it.append('userEmail',this.userEmail);
          it.append('userPassword',this.userPass);
          HttpManager.postLogIn(it).then((response)=>{
            if(response !== ''){
              this.isPass=false
              this.user = response
              this.$cookie.set("userId",this.user.userId)
            }else{
              this.$message.warning("邮箱或密码输入错误")
            }
          });
        }else{
          this.$message.warning("邮箱密码不可为空")
        }
      }else{
        if(this.userPass !== this.userPass_2){
          this.$message.error("两密码输入不一致,请重新输入")
        }else if(this.userPass === ''){
          this.$message.error("密码不可为空")
        }else{
          /*接收邮件后验证验证码*/
          let it = new URLSearchParams();
          it.append('verificationCode',this.checkNode)
          HttpManager.postVerificationCode(it).then((response)=>{
            if(response === 1){
              this.user.userPassword = this.userPass
              this.user.userEmail = this.userEmail
              //上传用户注册信息并验证
              it.append('User',JSON.stringify(this.user))
              HttpManager.postRegister(it).then((response)=>{
                if(response === -1){
                  this.$message.error('邮箱已注册')
                }else if(response === null){
                  this.$message.error('系统繁忙')
                }else {
                  this.isPass=false
                  this.user = response
                  this.$cookie.set("userId",this.user.userId)
                }
              })
            }else if(response === -1){
              this.$message.warning("验证码已过期")
            }else{
              this.$message.warning("验证码错误"+response)
            }
          });
        }
      }
    },
    toToggle(index){
      if(!index){
        this.buttonText_1 = "注册"
        this.buttonText_2 = "我注册过帐号了"
      }else{
        this.buttonText_1 = "登录"
        this.buttonText_2 = "我还没有账号"
      }
      this.toggle = !this.toggle
    },
    toSendMail(){
      if(this.userEmail === ''){
        this.$message.error('邮箱为空,请先输入邮箱');
        this.$refs.good.focus()
      }else if(this.userEmail !== "") {
        let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        //调用正则验证test()函数
        if(reg.test(this.userEmail)) {
          let timeOut = window.setInterval(()=>{
            if(this.leftTime > 0){
              this.leftTime --
            }else{
              this.toggle_2 = !this.toggle_2
              this.leftTime = 60
              clearInterval(timeOut)
            }
          },1000)
          this.toggle_2 = !this.toggle_2
          let it = new URLSearchParams();
          it.append('emailAddress',this.userEmail)
          HttpManager.postMail(it).then((response)=>{
            if(response === '1'){

              this.$message.success('邮箱已发送')
            }else{
              this.$message.warning("邮箱已注册111"+response)
            }
          });
        }else{
          this.$message.error('邮箱格式不正确,请重新输入');
          this.$refs.good.focus()
        }
      }
    },
  },
  watch:{

  },
  created() {
    let user = this.$cookie.get('userId')
    if (user !== null&&user !== ''){
      this.user.userId = user
      this.isPass = false
    }
  },
  mounted() {
    let user = this.$cookie.get('userId')
    if (user !== null&&user !== ''){
      this.user.userId = user
      this.isPass = false
    }else{
      this.isPass = true
    }
  }
}
</script>

<style scoped>
.bossBox{
  background-image: url("../assets/86cf69b5379ac8785798a2de71048a30.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}
.bodyBox{
  width: 30%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 5px );
  -webkit-backdrop-filter: blur( 5px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  align-items: center;
  min-width: 280px;
}
.inputBox{
  width: 80%;
  margin-top: 30px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
}
.el-button{
  margin-top:30px;
  font-size: 20px;
  background: #02597e;
  color: #fcfcfc;
  text-shadow: #000000 1px 1px;
  margin-bottom: 10px;
}
</style>
